<template>
  <view class="container" :style="appThemeStyle">
    <!-- 页面顶部 -->
    <view v-if="list.length" class="head-info">
      <view class="cart-total">
        <text>共</text>
        <text class="active">{{ total }}</text>
        <text>件商品</text>
      </view>
      <view class="cart-edit" @click="handleToggleMode()">
        <view v-if="mode == 'normal'" class="normal">
          <text class="icon iconfont icon-bianji"></text>
          <text>编辑</text>
        </view>
        <view v-if="mode == 'edit'" class="edit">
          <text>完成</text>
        </view>
      </view>
    </view>
    <!-- 购物车商品列表 -->
    <view v-if="list.length" class="cart-list">
		<view class="cart-item" v-for="(item, index) in list" :key="index">
			<!-- <delSlideLeft style="width: 100%;" :item="item"  :data_transit="{index:index,item:item}"  @delItem="delItem"> -->
				<view class="cart-list">
					<view class="cart-item">
						<view class="item-radio" @click="handleCheckItem(item.id)">
							<u-checkbox :modelValue="inArray(item.id, checkedIds)" shape="circle" :activeColor="appTheme.mainBg" />
						</view>
						<view class="goods-image" @click="onTargetGoods(item.goods_id)">
							<image class="image" :src="item.goods.goods_image" mode="scaleToFill"></image>
						</view>
						<view class="item-content">
						  <view class="goods-title" @click="onTargetGoods(item.goods_id)">
							<text class="twoline-hide">{{ item.goods.goods_name }}</text>
						  </view>
						  <view class="goods-props clearfix">
							<view class="goods-props-item" v-for="(props, idx) in item.goods.skuInfo.goods_props" :key="idx">
							  <text>{{ props.value.name }}</text>
							</view>
						  </view>
						  <view class="item-foot">
							<view class="goods-price">
							  <text class="unit">￥</text>
							  <text class="value">{{ item.goods.skuInfo.goods_price }}</text>
							</view>
							<view class="stepper">
							  <u-number-box :min="1" :max="item.goods.stock_total" :modelValue="item.goods_num" :step="1" @change="onChangeStepper($event, item)" />
							</view>
						  </view>
						</view>
					</view>
				</view>
			<!-- </delSlideLeft> -->
			
		</view>
	  
    </view>
    <!-- 购物车数据为空 -->
    <empty v-if="!list.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="咦～还不去逛逛">
      <template v-slot:slot>
        <view class="empty-ipt" @click="onTargetIndex()">
          <text>去逛逛</text>
        </view>
      </template>
    </empty>

    <!-- 底部操作栏 -->
    <view v-if="list.length" class="footer-fixed">
      <view class="all-radio">
        <u-checkbox :modelValue="checkedIds.length > 0 && checkedIds.length === list.length" shape="circle" :activeColor="appTheme.mainBg"
          @change="handleCheckAll()">全选</u-checkbox>
      </view>
	  <view class="bao">
		  <text v-if="totalPrice > 68" class="you">已包邮</text>
		  <text v-else class="you">满68包邮</text>
	  </view>
      <view class="total-info">
        <text class="goods-all">合计</text>
        <view class="goods-price">
          <text class="unit">￥</text>
          <text class="value">{{ totalPrice }}</text>
        </view>
      </view>
      <view class="cart-action">
        <view class="btn-wrapper">
          <!-- dev:下面的disabled条件使用checkedIds.join方式判断 -->
          <!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 -->
          <view v-if="mode == 'normal'" class="btn-item btn-main" :class="{ disabled: checkedIds.join() == '' }" @click="handleOrder()">
            <text>结算 {{ checkedIds.length > 0 ? `(${checkedIds.length})` : '' }}</text>
          </view>
          <view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }" @click="handleDelete()">
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import Empty from '@/components/empty'
  import { inArray, arrayIntersect, debounce } from '@/utils/util'
  import { checkLogin, setCartTotalNum, setCartTabBadge } from '@/core/app'
  import * as CartApi from '@/api/cart'
  // import delSlideLeft from '@/components/del_slideLeft/del_slideLeft.vue'

  const CartIdsIndex = 'CartIds'

  export default {
    components: {
      Empty,
	  // delSlideLeft
    },
    data() {
      return {
        inArray,
        // 正在加载
        isLoading: true,
        // 当前模式: normal正常 edit编辑
        mode: 'normal',
        // 购物车商品列表
        list: [],
        // 购物车商品总数量
        total: null,
        // 选中的商品ID记录
        checkedIds: [],
        // 选中的商品总金额
        totalPrice: '0.00'
      }
    },
    watch: {
      // 监听选中的商品
      checkedIds: {
        handler(val) {
          // 计算合计金额
          this.onCalcTotalPrice()
          // 记录到缓存中
          uni.setStorageSync(CartIdsIndex, val)
        },
        deep: true,
        immediate: false
      },
      // 监听购物车商品总数量
      total(val) {
        // 缓存并设置角标
        setCartTotalNum(val)
        setCartTabBadge()
      }
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow(options) {
      // 获取缓存中的选中记录
      this.checkedIds = uni.getStorageSync(CartIdsIndex)
      // 获取购物车商品列表
      checkLogin() ? this.getCartList() : this.isLoading = false
	  uni.showTabBar({
	     animation: false,
	  })
    },

    methods: {

      // 计算合计金额 (根据选中的商品)
      onCalcTotalPrice() {
        const app = this
        // 选中的商品记录
        const checkedList = app.list.filter(item => inArray(item.id, app.checkedIds))
        // 计算总金额
        let tempPrice = 0;
        checkedList.forEach(item => {
          // 商品单价, 为了方便计算先转换单位为分 (整数)
          const unitPrice = item.goods.skuInfo.goods_price * 100
          tempPrice += unitPrice * item.goods_num
        })
        app.totalPrice = (tempPrice / 100).toFixed(2)
      },

      // 获取购物车商品列表
      getCartList() {
        const app = this
        app.isLoading = true
        CartApi.list()
          .then(result => {
            app.list = result.data.list
            app.total = result.data.cartTotal
            // 清除checkedIds中无效的ID
            app.onClearInvalidId()
          })
          .finally(() => app.isLoading = false)
      },

      // 清除checkedIds中无效的ID
      onClearInvalidId() {
        const app = this
        const listIds = app.list.map(item => item.id)
        app.checkedIds = arrayIntersect(listIds, app.checkedIds)
      },

      // 切换当前模式
      handleToggleMode() {
        this.mode = this.mode == 'normal' ? 'edit' : 'normal'
      },

      // 监听步进器更改事件
      onChangeStepper({ value }, item) {
        // 这里是组织首次启动时的执行
        if (item.goods_num == value) return
        // 记录一个节流函数句柄
        if (!item.debounceHandle) {
          item.oldValue = item.goods_num
          item.debounceHandle = debounce(this.onUpdateCartNum, 500)
        }
        // 更新商品数量
        item.goods_num = value
        // 提交更新购物车数量 (节流)
        item.debounceHandle(item, item.oldValue, value)
      },

      // 提交更新购物车数量
      onUpdateCartNum(item, oldValue, newValue) {
        const app = this
        CartApi.update(item.goods_id, item.goods_sku_id, newValue)
          .then(result => {
            // 更新商品数量
            app.total = result.data.cartTotal
            // 重新计算合计金额
            app.onCalcTotalPrice()
            // 清除节流函数句柄
            item.debounceHandle = null
          })
          .catch(err => {
            // 还原商品数量
            item.goods_num = oldValue
            setTimeout(() => app.$toast(err.errMsg), 10)
          })
      },

      // 跳转到商品详情页
      onTargetGoods(goodsId) {
        this.$navTo('pages/goods/detail', { goodsId })
      },

      // 点击去逛逛按钮, 跳转到首页
      onTargetIndex() {
        this.$navTo('pages/category/index')
      },

      // 选中商品
      handleCheckItem(cartId) {
        const { checkedIds } = this
        const index = checkedIds.findIndex(id => id === cartId)
        index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1)
      },

      // 全选事件
      handleCheckAll() {
        const { checkedIds, list } = this
        this.checkedIds = checkedIds.length === list.length ? [] : list.map(item => item.id)
      },

      // 结算选中的商品
      handleOrder() {
        const app = this
        if (app.checkedIds.length) {
          const cartIds = app.checkedIds.join()
          app.$navTo('pages/checkout/index', { mode: 'cart', cartIds })
        }
      },

      // 删除选中的商品弹窗事件
      handleDelete() {
        const app = this
        if (!app.checkedIds.length) {
          return false
        }
        uni.showModal({
          title: '友情提示',
          content: '您确定要删除该商品吗？',
          showCancel: true,
          success({ confirm }) {
            // 确认删除
            confirm && app.onClearCart()
          }
        })
      },

      // 确认删除商品
      onClearCart() {
        const app = this
        CartApi.clear(app.checkedIds)
          .then(result => {
            app.getCartList()
            app.handleToggleMode()
          })
      },
	  
		//点击删除按钮事件
		delItem: function(e) {
			console.log(e)
			const cartId = e.item.id;
			// console.log(cartId);
			// return false;
			const app = this
			// const { checkedIds } = this
			// const index = checkedIds.findIndex(id => id === cartId)
			// index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1)
			// console.log(checkedIds)
			// app.handleDelete()
			
			uni.showModal({
			  title: '友情提示',
			  content: '您确定要删除该商品吗？',
			  showCancel: true,
			  success({ confirm }) {
			    // 确认删除
			    confirm && app.onClearCart2([cartId])
			  }
			})
		},
		onClearCart2(cartId) {
		  const app = this
		  CartApi.clear(cartId)
		    .then(result => {
		      app.getCartList()
		      app.handleToggleMode()
		    })
		},
    }
  }
</script>

<style>
	page{
		background: linear-gradient(to bottom, #FBFDF5, #FFFFFF)!important;
	}
	.u-checkbox{
		line-height: 0rpx!important;
	}
  .u-checkbox__icon-wrap--checked{
  	background: #1A8148!important;
  	border-color: #1A8148!important;
  }
  .u-checkbox__label.data-v-cafae08d {
      font-size: 28rpx;
      color: #A9B5AE;
  }
</style>
<style lang="scss" scoped>
  .container {
    padding-bottom: 120rpx;
  }
  
  // 页面顶部
  .head-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rpx 30rpx;
    // background-color: #fff;
    height: 80rpx;

    .cart-total {
      font-size: 28rpx;
      color: #333;

      .active {
        color: #1A8148;
        margin: 0 2rpx;
      }
    }

    .cart-edit {
      padding-left: 20rpx;

      .icon {
        margin-right: 12rpx;
      }

      .edit {
        color: #1A8148;
      }
    }

  }

  // 购物车列表
  .border{
  	border:1px solid red;
  }
  .cart-list {
	width:100%;
    padding: 0 20rpx 0 20rpx;
  }
  .cart-item {
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 0;
	margin-bottom: 10rpx;
    .item-radio {
      width: 56rpx;
      height: 80rpx;
      margin-right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .goods-image {
      width: 186rpx;
      height: 174rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }

    .item-content {
      flex: 1;
      padding-left: 24rpx;
	  height:155rpx;
	  position:relative;
      .goods-title {
        max-height: 76rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #042111;
		// margin-bottom: 60rpx;
      }

      .goods-props {
        margin-top: 14rpx;
        color: #ababab;
        font-size: 24rpx;
        overflow: hidden;

        .goods-props-item {
          font-size: 24rpx;
          color: #7D8D84;
        }
      }

      .item-foot {
		width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
		position: absolute;
		bottom: -6rpx;
		padding-right: 20rpx;
        .goods-price {
          vertical-align: bottom;
          color: $main-bg;

          .unit {
            font-size: 24rpx;
			font-weight: bold;
			color: #1A8148;
          }

          .value {
			font-weight: bold;
			font-size: 32rpx;
			color: #1A8148;
          }
        }
      }

    }
  }

  // 空数据按钮
  .empty-ipt {
    margin: 0 auto;
    width: 240rpx;
    height: 70rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
    border-radius: 50rpx;
    background: #1A8148;
    color: $main-text;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 底部操作栏
  .footer-fixed {
    display: flex;
	align-items: flex-end;
	height: 120rpx;
	background: #F8F8F8;
	padding: 0 30rpx 30rpx 30rpx;
	position: fixed;
	bottom: var(--window-bottom);
	left: 0;
	right: 0;
	z-index: 11;
	border-radius: 30rpx 30rpx 0rpx 0rpx;

    .all-radio {
      width: auto;
      display: flex;
      align-items: center;

      .radio {
        margin-bottom: -4rpx;
        transform: scale(0.76)
      }
    }
	.bao{
		padding-top: 5rpx;
		display: block;
		margin-left: -10rpx;
	}
	.you{
		font-weight: 400;
		font-size: 28rpx;
		color: #1A8148;
	}

    .total-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 30rpx;

      .goods-price {
        vertical-align: bottom;
        color: $main-bg;

        .unit {
          font-size: 24rpx;
		  font-weight: bold;
		  color: #1A8148;
        }

        .value {
		  font-weight: bold;
		  font-size: 40rpx;
		  color: #1A8148;
        }
      }
    }

    .cart-action {
      width: 146rpx;
      height: 60rpx;

      .btn-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .btn-item {
        flex: 1;
        font-size: 28rpx;
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
		width: 146rpx;
		height: 60rpx;
		background: #1A8148;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
      }

      // 去结算按钮
      .btn-main {
        // background: linear-gradient(to right, $main-bg, $main-bg2);
        color: $main-text;

        // 禁用按钮
        &.disabled {
          opacity: 0.6;
        }
      }

    }

  }
</style>